<template>
	<div>
		<div class="cp-header">
			<div class="cp-main-box">
				<a href="/" class="cp-logo">
					<!-- 主页logo -->
					<img src="../../public/img/logo.png">
				</a>
				<div class="layui-nav headerRight"  lay-filter="">
					<!-- 搜索框 -->
					<div class="cp-header-search">
						<input id="searchBox" @keyup="search" placeholder="可以搜索书名、作者哦！" v-model="searchContent">
						<a href="javascript:" class="iconfont icon-search"></a>
					</div>

					<div class="cp-header-link">
						<!-- 跳转充值页面 -->
						<a href="javascript:"></a>
						<a href="javascript:"></a>
						<a href="javascript:"></a>
						<a href="javascript:"></a>
						<a href="javascript:"></a>
					</div>
					<div class="cp-header-user" id="cpHeaderUser" v-show="!logged">
						<a href="/register">注册</a>
						<span></span>
						<a href="" @click.prevent="loginDialogVisible = true">登录</a>
					</div>
					<div class="layui-nav-item" id="userMsgBox" v-show="logged" style="">
						<!-- 跳转用户个人中心 -->
						<a href="/user/info">
							<i class="iconfont icon-dengpao"></i>
							<!-- 用户头像（可选） -->
							<img src="/img/default_head.png" class="layui-nav-img header">
							<!-- 用户名 -->
							<span class="userName cp-ellipsis" v-text="userName"></span>
							<!-- 更多 -->
							<span class="layui-nav-more"></span>
						</a>

						<dl class="layui-nav-child" id="userMsgChild">
							<dd>
								<a href="javascript:;">
									<i class="iconfont icon-tuichu"></i>
									退出
								</a>
							</dd>
						</dl>
					</div>
				</div>
			</div>
			<!-- 模态框 -->
			<el-dialog :close-on-click-modal="false" title="用户登录" :visible.sync="loginDialogVisible" width="20%">
				<el-form :model="loginForm" status-icon ref="ruleForm" label-width="0" class="demo-ruleForm">
					<el-form-item prop="tel">
						<el-input v-model.number="loginForm.userTel" placeholder="请输入电话"></el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="singIn">立即登录</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</div>
		<!-- 导航栏分类 -->
		<div class="cp-nav">
			<div class="cp-main-box">
				<a class="cp-nav-item" href="/">首页</a>
				<a class="cp-nav-item" href="/category/1">
					古代
				</a>
				<a class="cp-nav-item" href="/category/2">
					现代
				</a>
				<a class="cp-nav-item" href="/category/3">
					幻想
				</a>
				<a class="cp-nav-item" href="/category/4">
					架空
				</a>
			</div>
		</div>

		<div class="cp-main-box">
			<div class="cp-over-hidden">
				<div class="left" style="width: 895px;">
					<div class="cp-card" style="height: 314px;">
						<div class="cp-card-header cp-card-header-bold">
							<i class="iconfont icon-qiangtui"></i>
							<h3>本周强推</h3>
						</div>
						<div class="cp-card-line"></div>
						<div class="cp-card-content">
							<div class="cp-typerec-list">
								<div class="cp-typerec-item" v-for="book in thisWeekList" :key="book.bookId">
									<a :href="'/novel/' + book.bookId" class="cp-novel-cover">
										<img :src="book.image">
									</a>
									<a :href="'/novel/' + book.bookId" class="cp-novel-name cp-ellipsis">
										{{ book.bookName }}
									</a>
									<p class="cp-novel-desc">{{ book.description }}</p>
								</div>
							</div>
						</div>
					</div>

					<div class="cp-card" style="margin-top: 14px;">
						<div class="cp-card-header cp-card-header-bold">
							<i class="iconfont icon-wanjie"></i>
							<h3>完结推荐</h3>
						</div>
						<div class="cp-card-line"></div>
						<div class="cp-card-content cp-over-hidden">
							<div class="cp-done-rec-list cp-one-rec-list">
								<div class="cp-done-rec-item cp-canter-rec-item" v-for="book in overBookList">
									<a :href="'/novel/' + book.bookId" class="cp-novel-cover">
										<img :src="book.image"/>
									</a>
									<div class="left" style="width: 160px;">
										<a :href="'/novel/' + book.bookId" class="cp-novel-name cp-ellipsis">
											{{ book.bookName }}
										</a>
										<a href="javascript:" class="cp-novel-author iconfont icon-zuozhe">
											{{ book.authorName }}
										</a>
										<p class="cp-novel-desc">
											{{ book.description }}
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="cp-card" style="margin-top: 14px; height: 558px;">
						<div class="cp-card-header cp-card-header-bold">
							<i class="iconfont icon-xinshu"></i>
							<h3>新书精选</h3>
						</div>
						<div class="cp-card-line"></div>
						<div class="cp-card-content cp-over-hidden">
							<div class="cp-done-rec-list" style="height: auto;">
								<div class="cp-done-rec-item" v-for="book in newList">
									<a :href="'/novel/' + book.bookId" class="cp-novel-cover">
										<img :src="book.image"/>
									</a>
									<div class="left" style="width: 160px;">
										<a :href="'/novel/' + book.bookId" class="cp-novel-name cp-ellipsis">
											{{ book.bookName }}
										</a>
										<a href="javascript:;" class="cp-novel-author iconfont icon-zuozhe">
											{{ book.authorName }}
										</a>
										<p class="cp-novel-desc">
											{{ book.description }}
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="right" style="width: 286px;">
					<div class="cp-ranking-list"
						 style="width: 286px; height: 476px; ">
						<div class="cp-ranking-top">
							<i class="iconfont icon-renqi"></i>
							<h3>人气排行</h3>
						</div>
						<div class="cp-ranking-novel-list">
							<div class="cp-ranking-novel-item" v-for="(book, index) in hotList" :key="book.bookId">
								<span class="cp-ranking-order">{{ index + 1 }}</span>
								<a :href="'/novel/' + book.bookId" class="cp-novel-name cp-ellipsis  ">
									{{ book.bookName }}
								</a>
							</div>

							<!-- <a class="cp-ranking-more">More ></a> -->
						</div>
					</div>
				</div>
			</div>

		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer'
	import $ from "jquery";

	export default {
		name: 'Category',
		components: {
			Footer
		},
		data() {
			return {
				// 登录模态框可见
				loginDialogVisible: false,
				// 登录表单
				loginForm: {
					userTel: "",
					password: ""
				},
				// 搜索内容
				searchContent: "",
				// 新书推荐
				thisWeekList: [],
				//完结推荐
				overBookList: [],
				// 新书推荐
				newList: [],
				// 人气
				hotList: [],
			}
		},
		computed: {
			// 登录状态
			logged: function () {
				return (this.userName != null);
			},
			// 用户名
			userName: function () {
				return sessionStorage.getItem("userName");
			}
		},
		methods: {
			// 搜索
			search() {

			},
			// 登录
			singIn() {
				let _this = this;
				$.ajax({
					url: "http://localhost/user/login",
					type: "POST",
					data: _this.loginForm,
					success: function (res) {
						// 判断响应码
						if (res.code != 200) {
							// 错误提示信息
							_this.$message.error(res.message);
							return;
						}
						// 登录成功提示信息
						_this.$message.success("登录成功");
						// 关闭模态框
						_this.loginDialogVisible = false;
						// 将返回数据存入session
						sessionStorage.setItem("userId", res.data.userId);
						sessionStorage.setItem("userName", res.data.userName);
						// 存入作者Id
						if (res.data.authorId != null) {
							sessionStorage.setItem("authorId", res.data.authorId);
						}
						// 刷新
						location.reload();
					}
				});
			},
			logout() {
				sessionStorage.clear();
				location.reload();
			}
		},
		mounted() {
			var _this = this
			layui.use('element');
			// 获取地址栏传递的分类id
			let id = this.$route.params.id;
			$(".cp-nav-item").eq(id).addClass('active').css('color','rgb(81, 194, 154)');
			$.ajax({
			    url: "http://localhost/category/"+this.$route.params.id,
			    type: "GET",
			    success(data) {
					_this.thisWeekList=data.data.thisWeekBooksList;
					_this.overBookList=data.data.overBookList;
					_this.newList=data.data.newBookList;
					_this.hotList=data.data.clickBooksList;
			    }
			});
		}
	}
</script>

<style scoped>
	.el-button {
		background-color:#51c29a;
		border: #51c29a 1px solid;
		width: 100%;
		border-radius: 3px;
	}
	.el-button:hover {
		background-color:#7adbbb;
		border: #7adbbb solid 1px;
	}
	.loginBoxTitle {
		bottom: 20px;
	}
</style>
